<template>
  <div class="user-container">
    <div class="control-area">
      <PasswordSet></PasswordSet>
      <router-link to="/permission/user-create">
        <el-button class="ed-button ed_black-bottom ed-button36" v-has="'system:user:add'"><svg-icon icon-class="add-svg"/>添加用户</el-button>
      </router-link>
    </div>
    <el-table
      :data="userTable"
      style="width: 100%;"
      row-key="id"
      size="small"
      stripe
      border
    >
      <el-table-column
        prop="nickName"
        label="昵称"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="loginName"
        label="用户名"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号码"
        width="150"
      ></el-table-column>
      <el-table-column prop="roles" label="用户角色">
        <template slot-scope="scope">
          <span
            v-if="scope.row.roles.length != 0"
            v-for="(item, index) in scope.row.roles"
          >
            {{ item.roleName }}
            <span v-if="scope.row.roles.length - 1 != index">、</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column prop="type" label="类型" align="center" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.type == 1">系统管理员</div>
          <div v-if="scope.row.type == 2">物业管理人员</div>
          <div v-if="scope.row.type == 3">物业工作人员</div>
          <div v-if="scope.row.type == 5">商户</div>
          <div v-if="scope.row.type == 4">住户访客</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="60">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? '停用' : '启用' }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="172" align="center">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="updateRow(scope.$index, scope.row)"
            type="primary"
            plain
            size="mini"
            style="float: left;"
            v-has="'system:user:update'"
            :disabled="$store.getters.id == scope.row.id"
          >
            修改
          </el-button>
          <div style="margin-left: 10px; float: left;">
            <el-popconfirm
              title="确定重置该客户密码吗？"
              @confirm="resetPwd(scope.$index, scope.row)"
            >
              <el-button type="primary" plain size="mini" slot="reference" v-has="'system:user:resetpwd'">
                重置密码
              </el-button>
            </el-popconfirm>
          </div>
          <!--                    <div style="margin-left: 10px;">-->
          <!--                        <el-popconfirm title="确定删除？" @confirm="deleteRow(scope.$index, scope.row)">-->
          <!--                            <el-button-->
          <!--                                type="danger"-->
          <!--                                plain size="mini"-->
          <!--                                slot="reference"-->
          <!--                                disabled>-->
          <!--                                删除-->
          <!--                            </el-button>-->
          <!--                        </el-popconfirm>-->
          <!--                    </div>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getUserByPage } from 'src/api/permission'
import { resetpwd } from 'src/api/user'
import PasswordSet from './components/passwordSet.vue'
export default {
  name: 'UserList',
  components: { PasswordSet },
  data() {
    return {
      userTable: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
    }
  },
  activated() {
    this.getUserList(this.page.current)
  },
  methods: {
    getUserList(current) {
      getUserByPage({
        page: current,
        pageSize: this.page.size,
      }).then((response) => {
        this.userTable = response.data.records
        this.page.current = response.data.current
        this.page.total = response.data.total
      })
    },
    changePage(current) {
      this.getUserList(current)
    },
    deleteRow(index, row) {},
    updateRow(index, row) {
      console.log("updateRow",row)
      this.$router.push({
        path: '/permission/user-update',
        query: { id: row.id ,type:row.type},
      })
    },
    resetPwd(index, row) {
      resetpwd({
        id: row.id,
      }).then((response) => {
        if (response.code == 20000) {
          let data = response.data
          this.$confirm(
            `您的密码已被修改为<strong>${data}</strong>`,
            '重置成功',
            {
              confirmButtonText: '复制',
              cancelButtonText: '取消',
              center: true,
              type: 'success',
              closeOnClickModal: false,
              dangerouslyUseHTMLString: true,
            },
          )
            .then(() => {
              //创建一个input元素
              let input = document.createElement('input')
              //给input的内容复制
              input.value = data
              // 在body里面插入这个元素
              document.body.appendChild(input)
              // 选中input里面内容
              input.select()
              //执行document里面的复制方法
              document.execCommand('Copy')
              // 复制之后移除这个元素
              document.body.removeChild(input)
              this.$message.success({
                message: '复制成功',
                duration: 2000,
                center: true,
              })
            })
            .catch(() => {})
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.user {
  &-container {
    margin: 30px;

    .control {
      &-area {
        margin-bottom: 8px;
        text-align: right;
      }
    }

    .pagination {
      margin-top: 12px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
